<template>
  <div class="overf">
    <div id="table" class="sheet">
      <hot-table ref="hot" :data="data" :settings="hotSettings" />
    </div>
  </div>
</template>
<script>
import { HotTable } from '@handsontable/vue';
// import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.full.css';
export default {
  components: { HotTable },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      hot: null,
      hotSettings: {
        readOnly: true,
        // manualColumnResize: true,
        // manualRowResize: true,
        // minSpareRows: 0
      },
    };
  },
  watch: {
    data(newValue) {
      this.$refs.hot.hotInstance.loadData(newValue);
    },
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.overf {
  height: 300px;
  overflow: hidden;
}
.sheet {
  height: 100%;
  overflow: auto;
  & >>> #hot-display-license-info {
    display: none;
  }
}
</style>

